<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100">
            <div class="Card">
                <div class="CardTopic">AccordionPanel</div>
                <div class="SeparatorFull"/>

                <div class="Container100">
                    <h:form>
                        <p:accordionPanel>
                            <p:tab title="Tab 1">
                                <h:panelGrid columns="2" cellpadding="10">
                                    <i class="icon-lab Blue Fs60"/>
                                    <h:outputText value="Objects in material design possess similar qualities to objects in the physical world.
                                                  In the physical world, objects can be stacked or affixed to one another,
                                                  but cannot pass through each other. Objects cast shadows and reflect light.
                                                  These qualities form a spatial model that is familiar to users and can be applied consistently across apps.
                                                  Underpinning this spatial model are the concepts of elevation and shadow." />
                                </h:panelGrid>
                            </p:tab>
                            <p:tab title="Tab 2">
                                <h:panelGrid columns="2" cellpadding="10">
                                    <i class="icon-syringe TealGreen Fs60"/>
                                    <h:outputText value="The material environment is a 3D space, which means all objects have x, y, and z dimensions.
                                                  The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer.
                                                  Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness.
                                                  On the web, the z-axis is used for layering and not for perspective.
                                                  The 3D world is emulated by manipulating the y-axis." />
                                </h:panelGrid>
                            </p:tab>
                            <p:tab title="Tab 3">
                                <h:panelGrid columns="2" cellpadding="10">
                                    <h:outputText value="We challenged ourselves to create a visual language
                                                  for our users that synthesizes the classic principles of good design
                                                  with the innovation and possibility of technology and science.
                                                  This is material design. This spec is a living document that will be updated
                                                  as we continue to develop the tenets and specifics of material design." />
                                </h:panelGrid>
                            </p:tab>
                        </p:accordionPanel>
                    </h:form>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="Card">
                <div class="CardTopic">PanelGrid - ScrollPanel</div>
                <div class="SeparatorFull"/>
                <div class="Container100">
                    <h2 class="BigTopic">PanelGrid Basic</h2>
                    <p:panelGrid columns="2" layout="grid" style="margin-bottom:20px">
                        <h:outputText value="Name"/>
                        <h:outputText value="Kobe Bryant"/>

                        <h:outputText value="Team"/>
                        <h:outputText value="Los Angeles Lakers"/>

                        <h:outputText value="Position"/>
                        <h:outputText value="Shooting Guard"/>

                        <h:outputText value="Number"/>
                        <h:outputText value="24"/>
                    </p:panelGrid>

                    <h2 class="BigTopic">PanelGrid Grouping</h2>
                    <p:panelGrid style="width:100%">
                        <f:facet name="header">
                            <p:row>
                                <p:column colspan="7">1995-96 NBA Playoffs</p:column>
                            </p:row>
                            <p:row>
                                <p:column colspan="2">Conf. Semifinals</p:column>
                                <p:column colspan="2">Conf. Finals</p:column>
                                <p:column colspan="2">NBA Finals</p:column>
                                <p:column>Champion</p:column>
                            </p:row>
                        </f:facet>

                        <p:row>
                            <p:column style="font-weight: bold;">Seattle</p:column>
                            <p:column style="font-weight: bold;">4</p:column>

                            <p:column rowspan="2" style="font-weight: bold;">Seattle</p:column>
                            <p:column rowspan="2" style="font-weight: bold;">4</p:column>

                            <p:column rowspan="5">Seattle</p:column>
                            <p:column rowspan="5">2</p:column>

                            <p:column rowspan="11" style="font-weight: bold;">Chicago</p:column>
                        </p:row>

                        <p:row>
                            <p:column>Houston</p:column>
                            <p:column >0</p:column>
                        </p:row>

                        <p:row>
                            <p:column colspan="4" styleClass="ui-widget-header">
                                <p:spacer height="0"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="font-weight: bold;">Utah</p:column>
                            <p:column style="font-weight: bold;">4</p:column>

                            <p:column rowspan="2">Utah</p:column>
                            <p:column rowspan="2">3</p:column>
                        </p:row>

                        <p:row>
                            <p:column>San Antonio</p:column>
                            <p:column >2</p:column>
                        </p:row>

                        <p:row>
                            <p:column colspan="6" styleClass="ui-widget-header">
                                <p:spacer height="0"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="font-weight: bold;">Chicago</p:column>
                            <p:column style="font-weight: bold;">4</p:column>

                            <p:column rowspan="2" style="font-weight: bold;">Chicago</p:column>
                            <p:column rowspan="2" style="font-weight: bold;">4</p:column>

                            <p:column rowspan="5" style="font-weight: bold;">Chicago</p:column>
                            <p:column rowspan="5" style="font-weight: bold;">4</p:column>
                        </p:row>

                        <p:row>
                            <p:column>New York</p:column>
                            <p:column >1</p:column>
                        </p:row>

                        <p:row>
                            <p:column colspan="4" styleClass="ui-widget-header">
                                <p:spacer height="0"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column>Atlanta</p:column>
                            <p:column >1</p:column>

                            <p:column rowspan="2">Orlando</p:column>
                            <p:column rowspan="2">0</p:column>
                        </p:row>

                        <p:row>
                            <p:column style="font-weight: bold;">Orlando</p:column>
                            <p:column style="font-weight: bold;">4</p:column>
                        </p:row>

                        <f:facet name="footer">
                            <p:row>
                                <p:column colspan="4" style="text-align: right">Finals MVP</p:column>
                                <p:column colspan="3" rowspan="3">Michael Jordan (Chicago)</p:column>
                            </p:row>

                            <p:row>
                                <p:column colspan="4" style="text-align: right">Season MVP</p:column>
                            </p:row>
                            <p:row>
                                <p:column colspan="4" style="text-align: right">Top Scorer</p:column>
                            </p:row>
                        </f:facet>
                    </p:panelGrid>
                </div>

                <div class="Container100">
                    <h2 class="BigTopic">Custom Scrollbars</h2>
                    <h:form>
                        <p:scrollPanel style="height:200px; min-width:200px; width:270px !important;">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Aenean blandit tortor a ipsum vehicula, in semper sapien auctor.
                                Nulla tempor eget est non consequat.
                                Nulla sit amet lorem justo.
                                Cras non tellus eros.
                                Sed ultricies orci ut quam interdum fringilla.
                                Nam vitae massa ac mi elementum mattis vel vitae sem.
                                Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh.
                                Interdum et malesuada fames ac ante ipsum primis in faucibus.
                            </p>
                            <p>
                                Vivamus ac ullamcorper magna.
                                Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit.
                                Morbi a convallis magna.
                                In nec leo vel dolor hendrerit pharetra.
                                Cras in iaculis enim.
                                Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum.
                                Aliquam sollicitudin gravida luctus.
                            </p>
                            <p>
                                Ut vel nulla sit amet erat laoreet eleifend nec sed lacus.
                                Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla.
                                Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula.
                                Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula.
                                Fusce vehicula posuere interdum.
                                Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum.
                                Interdum et malesuada fames ac ante ipsum primis in faucibus.
                                Nulla id varius enim, sed rutrum orci.
                            </p>
                            <p>
                                Sed tincidunt urna quis metus lacinia commodo.
                                Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero.
                                Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur.
                                Donec facilisis dapibus ultrices.
                                Donec luctus auctor lacus, at congue nisi aliquet eu.
                                Praesent in justo at risus faucibus ultricies.
                                Fusce et libero lectus.
                                Donec elementum pharetra sapien, at placerat purus sodales et.
                                Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat.
                                Donec consequat euismod lacinia.
                                Etiam nec quam vehicula, cursus massa in, ullamcorper erat.
                            </p>
                            <p>
                                Praesent volutpat scelerisque vestibulum.
                                In eu massa non neque rutrum commodo.
                                Nunc vel enim nisi.
                                Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui.
                                Nunc rhoncus turpis id lorem luctus consequat.
                                Nulla condimentum adipiscing turpis consequat semper.
                                Etiam ullamcorper velit nec hendrerit malesuada.
                                Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit.
                                Quisque mi tortor, vestibulum in arcu non, pretium auctor libero.
                                In commodo luctus placerat.
                            </p>
                        </p:scrollPanel>
                    </h:form>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="Card">
                <div class="CardTopic">Toolbar - NotificationBar</div>
                <div class="SeparatorFull"/>
                <div class="Container100">
                    <h2 class="BigTopic">Toolbar</h2>
                    <h:form>
                        <p:toolbar>
                            <f:facet name="left">
                                <p:commandButton type="button" value="New" icon="fa fa-plus Fs14 white" />
                                <p:commandButton type="button" value="Open" icon="fa fa-folder-open Fs14 white" />
                                <span class="ui-separator">
                                    <span class="fa fa-ellipsis-v SoftGray"/>
                                </span>
                                <p:commandButton type="button" title="Save" icon="fa fa-save Fs14 white" />
                                <p:commandButton type="button" title="Delete" icon="fa fa-trash Fs14 white" />
                                <p:commandButton type="button" title="Print" icon="fa fa-print Fs14 white" />
                            </f:facet>

                            <f:facet name="right">
                                <p:menuButton value="Options">
                                    <p:menuitem value="Save" actionListener="#{toolbarView.save}" icon="fa fa-save" />
                                    <p:menuitem value="Update" actionListener="#{toolbarView.update}" icon="fa fa-upload" />
                                    <p:menuitem value="Delete" actionListener="#{toolbarView.delete}" ajax="false" icon="fa fa-trash" />
                                    <p:menuitem value="Homepage" url="http://www.primefaces.org/" icon="fa fa-home" />
                                </p:menuButton>
                            </f:facet>
                        </p:toolbar>
                    </h:form>
                </div>

                <div class="Container100">
                    <h2 class="BigTopic">NotificationBar</h2>
                    <p:notificationBar position="top" effect="slide" styleClass="top" widgetVar="bar">
                        <h:outputText value="PrimeFaces Rocks!"/>
                    </p:notificationBar>

                    <p:commandButton value="Show" onclick="PF('bar').show()" type="button" icon="fa fa-arrow-down white"/>
                    <p:commandButton value="Hide" onclick="PF('bar').hide()" type="button" icon="fa fa-arrow-up white"/>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="Card">
                <div class="CardTopic">Panel - Fieldset</div>
                <div class="SeparatorFull"/>
                <div class="Container40 Responsive100">
                    <h2 class="BigTopic">Panel</h2>
                    <h:form>
                        <p:panel id="basic" header="Basic Panel" footer="Panel Footer" style="margin-bottom:20px">
                            <h:panelGrid columns="2" cellpadding="10">
                                <i class="icon-flow-switch Fs100 TealGreen"/>
                                <h:outputText value="Color in material design is inspired by bold hues juxtaposed with muted environments,
                                              deep shadows, and bright highlights.
                                              Material takes cues from contemporary architecture,
                                              road signs, pavement marking tape, and athletic courts.
                                              Color should be unexpected and vibrant." />
                            </h:panelGrid>
                        </p:panel>
                    </h:form>
                </div>

                <div class="Container60 Responsive100">
                    <h2 class="BigTopic">Fieldset</h2>
                    <p:fieldset legend="Activities" toggleable="true" toggleSpeed="500">
                        <div class="Wid100 MarAuto">
                            <div class="ContainerIndent">
                                <div class="Container33 Responsive100">
                                    <div class="ContainerIndent">
                                        <div class="Card RedBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-atom Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Physics</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="Container33 Responsive100">
                                    <div class="ContainerIndent">
                                        <div class="Card OrangeBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-barbell Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Sports</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="Container33 Responsive100">
                                    <div class="ContainerIndent">
                                        <div class="Card TealGreenBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-mapmarker Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Locations</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="Container33 Responsive100">
                                    <div class="ContainerIndent">
                                        <div class="Card GreenBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-coffee Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Cafe</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="Container33 Responsive100">
                                    <div class="ContainerIndent">
                                        <div class="Card BlueBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-bag Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Shopping</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="Container33 Responsive100">
                                    <div class="ContainerIndent">
                                        <div class="Card PurpleBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-pill Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Health</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="Container33 Responsive100">
                                    <div class="ContainerIndent">
                                        <div class="Card LimeBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-microphone Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Sounds</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="Container33 Responsive100">
                                    <div class="ContainerIndent">
                                        <div class="Card BrownBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-comment Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Speak</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </p:fieldset>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="Card">
                <div class="CardTopic">TabView</div>
                <div class="SeparatorFull"/>
                <div class="Container100">
                    <h2 class="BigTopic">Basic</h2>
                    <p:tabView>
                        <p:tab title="Yesterday">
                            <h:panelGrid columns="2" cellpadding="10">
                                <div class="Container100">
                                    <div class="ContainerIndent">
                                        <div class="Card OrangeBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-weather-partly-sunny Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Sunny</div>
                                        </div>
                                    </div>
                                </div>
                                <h:outputText value="Product icons are the visual expression of a brand's products,
                                              services, and tools. Simple, bold, and friendly,
                                              they communicate the core idea and intent of a product.
                                              While each product icon is visually distinct,
                                              all product icons for a given brand should be unified through concept and execution."/>
                            </h:panelGrid>
                        </p:tab>
                        <p:tab title="Today">
                            Tab 2 Content
                        </p:tab>
                        <p:tab title="Tomorrow">
                            Tab 2 Content
                        </p:tab>
                    </p:tabView>
                </div>
                <div class="Container50 Responsive100">
                    <h2 class="BigTopic">TabView Scrollable (Top)</h2>
                    <p:tabView scrollable="true">
                        <p:tab title="Today">
                            <h:panelGrid columns="2" cellpadding="10">
                                <div class="Container100">
                                    <div class="ContainerIndent">
                                        <div class="Card OrangeBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-weather-partly-sunny Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Sunny</div>
                                        </div>
                                    </div>
                                </div>
                                <h:outputText value="Product icons are the visual expression of a brand's products,
                                              services, and tools. Simple, bold, and friendly,
                                              they communicate the core idea and intent of a product.
                                              While each product icon is visually distinct,
                                              all product icons for a given brand should be unified through concept and execution."/>
                            </h:panelGrid>
                        </p:tab>
                        <p:tab title="Tomorrow">Tab 2 Content</p:tab>
                        <p:tab title="Jan 8">Tab 3 Content</p:tab>
                        <p:tab title="Jan 9">Tab 4 Content</p:tab>
                        <p:tab title="Jan 10">Tab 5 Content</p:tab>
                        <p:tab title="Jan 12">Tab 6 Content</p:tab>
                        <p:tab title="Jan 13">Tab 7 Content</p:tab>
                        <p:tab title="Jan 14">Tab 8 Content</p:tab>
                        <p:tab title="Jan 15">Tab 9 Content</p:tab>
                        <p:tab title="Jan 16">Tab 10 Content</p:tab>
                        <p:tab title="Jan 17">Tab 11 Content</p:tab>
                        <p:tab title="Jan 18">Tab 12 Content</p:tab>
                        <p:tab title="Jan 19">Tab 13 Content</p:tab>
                        <p:tab title="Jan 20">Jan 14 Content</p:tab>
                        <p:tab title="Jan 21">Jan 15 Content</p:tab>
                        <p:tab title="Jan 22">Jan 16 Content</p:tab>
                        <p:tab title="Jan 23">Jan 17 Content</p:tab>
                        <p:tab title="Jan 24">Jan 18 Content</p:tab>
                        <p:tab title="Jan 25">Jan 19 Content</p:tab>
                        <p:tab title="Jan 26">Jan 20 Content</p:tab>
                        <p:tab title="Jan 27">Jan 21 Content</p:tab>
                    </p:tabView>

                    <div class="EmptyBox20"/>

                    <h2 class="BigTopic">TabView Scrollable (Bottom)</h2>
                    <p:tabView orientation="bottom" scrollable="true">
                        <p:tab title="Today">
                            <h:panelGrid columns="2" cellpadding="10">
                                <div class="Container100">
                                    <div class="ContainerIndent">
                                        <div class="Card RedBack White TexAlCenter HoverEffect">
                                            <div class="EmptyBox5"/>
                                            <i class="icon-weather-shower Fs50"/>
                                            <div class="EmptyBox5"/>
                                            <div class="FontRobotoLight Fs16 DispBlock ClearBoth">Rainy</div>
                                        </div>
                                    </div>
                                </div>
                                <h:outputText value="Product icons are the visual expression of a brand's products,
                                              services, and tools. Simple, bold, and friendly,
                                              they communicate the core idea and intent of a product.
                                              While each product icon is visually distinct,
                                              all product icons for a given brand should be unified through concept and execution."/>
                            </h:panelGrid>
                        </p:tab>
                        <p:tab title="Tomorrow">Tab 2 Content</p:tab>
                        <p:tab title="Jan 8">Tab 3 Content</p:tab>
                        <p:tab title="Jan 9">Tab 4 Content</p:tab>
                        <p:tab title="Jan 10">Tab 5 Content</p:tab>
                        <p:tab title="Jan 12">Tab 6 Content</p:tab>
                        <p:tab title="Jan 13">Tab 7 Content</p:tab>
                        <p:tab title="Jan 14">Tab 8 Content</p:tab>
                        <p:tab title="Jan 15">Tab 9 Content</p:tab>
                        <p:tab title="Jan 16">Tab 10 Content</p:tab>
                        <p:tab title="Jan 17">Tab 11 Content</p:tab>
                        <p:tab title="Jan 18">Tab 12 Content</p:tab>
                        <p:tab title="Jan 19">Tab 13 Content</p:tab>
                        <p:tab title="Jan 20">Jan 14 Content</p:tab>
                        <p:tab title="Jan 21">Jan 15 Content</p:tab>
                        <p:tab title="Jan 22">Jan 16 Content</p:tab>
                        <p:tab title="Jan 23">Jan 17 Content</p:tab>
                        <p:tab title="Jan 24">Jan 18 Content</p:tab>
                        <p:tab title="Jan 25">Jan 19 Content</p:tab>
                        <p:tab title="Jan 26">Jan 20 Content</p:tab>
                        <p:tab title="Jan 27">Jan 21 Content</p:tab>
                    </p:tabView>
                </div>

                <div class="Container50 Responsive100">
                    <h2 class="BigTopic">TabView Orientation - Left</h2>
                    <p:tabView orientation="left">
                        <p:tab title="Tab 1">
                            <h:panelGrid columns="2" cellpadding="3">
                                <h:panelGroup>
                                    <i class="icon-briefcase Fs50 Purple"/>
                                    <div class="EmptyBox40"/>
                                    <i class="icon-gift Fs50 Orange"/>
                                    <div class="EmptyBox40"/>
                                    <i class="icon-headphones Fs50 Blue"/>
                                </h:panelGroup>
                                <h:outputText value="Material design is guided by print-based design elements—such as typography,
                                              grids, space, scale, color, and imagery—to create hierarchy, meaning,
                                              and focus that immerse the user in the experience.
                                              Material design adopts tools from the field of print design,
                                              like baseline grids and structural templates,
                                              encouraging consistency across environments by repeating visual elements,
                                              structural grids, and spacing across platforms and screen sizes.
                                              These layouts scale to fit any screen size,
                                              which simplifies the process of creating scalable apps."/>
                            </h:panelGrid>
                        </p:tab>
                        <p:tab title="Tab 2">
                            <h:panelGrid columns="1" cellpadding="10">
                                <h:outputText value="Francis Ford Coppola's legendary.
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                              Aenean blandit tortor a ipsum vehicula, in semper sapien auctor.
                                              Nulla tempor eget est non consequat."/>
                            </h:panelGrid>
                        </p:tab>
                        <p:tab title="Tab 3">
                            <h:panelGrid columns="1" cellpadding="10">
                                <h:outputText value="After a break of more than 15 years.
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                              Aenean blandit tortor a ipsum vehicula, in semper sapien auctor.
                                              Nulla tempor eget est non consequat."/>
                            </h:panelGrid>
                        </p:tab>
                    </p:tabView>

                    <div class="EmptyBox20"/>

                    <h2 class="BigTopic">TabView Orientation - Right</h2>
                    <p:tabView orientation="right">
                        <p:tab title="Tab 1">
                            <h:panelGrid columns="2" cellpadding="3">
                                <h:panelGroup>
                                    <i class="icon-bell Fs50 Brown"/>
                                    <div class="EmptyBox40"/>
                                    <i class="icon-pen Fs50 Pink"/>
                                    <div class="EmptyBox40"/>
                                    <i class="icon-plug Fs50 TealGreen"/>
                                </h:panelGroup>
                                <h:outputText value="Material design is guided by print-based design elements—such as typography,
                                              grids, space, scale, color, and imagery—to create hierarchy, meaning,
                                              and focus that immerse the user in the experience.
                                              Material design adopts tools from the field of print design,
                                              like baseline grids and structural templates,
                                              encouraging consistency across environments by repeating visual elements,
                                              structural grids, and spacing across platforms and screen sizes.
                                              These layouts scale to fit any screen size,
                                              which simplifies the process of creating scalable apps."/>
                            </h:panelGrid>
                        </p:tab>
                        <p:tab title="Tab 2">
                            <h:panelGrid columns="1" cellpadding="10">
                                <h:outputText value="Francis Ford Coppola's legendary.
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                              Aenean blandit tortor a ipsum vehicula, in semper sapien auctor.
                                              Nulla tempor eget est non consequat."/>

                            </h:panelGrid>
                        </p:tab>
                        <p:tab title="Tab 3">
                            <h:panelGrid columns="1" cellpadding="10">
                                <h:outputText value="After a break of more than 15 years.
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                              Aenean blandit tortor a ipsum vehicula, in semper sapien auctor.
                                              Nulla tempor eget est non consequat."/>
                            </h:panelGrid>
                        </p:tab>
                    </p:tabView>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>